<template>
  <transition name="bounce">
    <section class="mui-content pd">
      <mh-header :headName="headName"> </mh-header>
      <div class="like-wrap">
        <div class="my-avatar mui-text-center">
          <img :src="myAvatar" alt="头像">
        </div>
        <p class="mui-text-center mh-color" v-if="headName === '谁看过我'">
          <span class="text-lg" v-text="dataLens">87</span>
          <span>位会员对您感兴趣</span>
        </p>
        <p class="mui-text-center mh-color" v-if="headName === '谁喜欢我'">
          <span class="text-lg" v-text="dataLens">87</span>
          <span>位会员喜欢了您</span>
        </p>
        <p class="mui-text-center mh-color" v-if="headName === '我喜欢谁'">
          <span class="text-lg" v-text="dataLens">87</span>
          <span>位会员您喜欢过</span>
        </p>
        <p class="mui-text-center mh-color" v-if="headName === '相互喜欢'">
          <span class="text-lg" v-text="dataLens">87</span>
          <span>位会员您相互喜欢</span>
        </p>
        <p class="mui-text-center mh-mg-tb" v-if='type==1'>开通水晶会员查看看过您的人</p>
        <p class="mui-text-center mh-mg-tb" v-if='type==2'>开通水晶会员查看喜欢您的人</p>
        <p class="mui-text-center mh-mg-tb" v-if='type==3'>开通水晶会员查看您喜欢的人</p>
        <p class="mui-text-center mh-mg-tb" v-if='type==4'>开通水晶会员查看相互喜欢的人</p>
        <div class="mui-content-padded mh-pd-lr">
          <button type="button" class="mui-btn mui-btn-block mh-btn" @tap='toMember'>去开通</button>
        </div>
        <div class="visitor-list">
          <ul class="flex">
            <li class="mui-text-center" v-for="item in visitors">
              <div class="pic-box">
                <img :src="item.portrait" alt="头像">
                <div class="lock-layer"></div>
                <img class="lock" src="../../../assets/images/ico/ic_e_lock.png" alt="锁">
              </div>
              <p class="visit-time">{{item.time}}</p>
            </li>
          </ul>
        </div>
      </div>
    </section>
  </transition>
</template>

<script>
  import MhHeader from '@/components/mh-header/mh-header'
  import LikeList from '@/components/explore/like-list'
  import {MH_API} from "@/api/api";
  export default {
    name: "mind-match",
    data () {
      return {
        headName: '谁看过我',
        type: 1,
        myAvatar: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1019333328,1858047370&fm=26&gp=0.jpg',
        likeNum: 87,
        likeYou: 136,
        myLike: 23,
        likeEach: 23,
        dataLens: 0,
        visitors: [
          // {
          //   id: '1',
          //   pic: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2925197328,706576635&fm=26&gp=0.jpg',
          //   time: '1小时前'
          // },
          // {
          //   id: '2',
          //   pic: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=667941305,57453066&fm=26&gp=0.jpg',
          //   time: '1小时前'
          // },
          // {
          //   id: '3',
          //   pic: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=53899050,900497296&fm=26&gp=0.jpg',
          //   time: '1小时前'
          // },
          // {
          //   id: '4',
          //   pic: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3292219442,1199407155&fm=26&gp=0.jpg',
          //   time: '1小时前'
          // }
        ]
      }
    },
    methods:{
      toMember(){
        this.$router.push({
          path: '/profile/member'
        })
      }
    },
    created () {
      this.headName = this.$route.query.name;
      let type = this.$route.query.type;
      this.type = type;
      console.log(1234567890)

      let self = this;
      //谁看过我
      if(type==1){
        MH_API.getSeenList({}).then(res => {
          if (res.status === 200) {
            self.visitors = res.data;
            self.dataLens = res.data.length;
          }
        })
      }
      //谁喜欢我
      else if(type==2){
        MH_API.getLoveList({}).then(res => {
          if (res.status === 200) {
            self.visitors = res.data;
            self.dataLens = res.data.length;
          }
        })
      }
      //我喜欢谁
      else if(type==3){
        MH_API.getMyLove({}).then(res => {
          if (res.status === 200) {
            self.visitors = res.data;
            self.dataLens = res.data.length;
          }
        })
      }
      //相互喜欢
      else if(type==4){
        MH_API.getMutualLove({}).then(res => {
          if (res.status === 200) {
            self.visitors = res.data;
            self.dataLens = res.data.length;
          }
        })
      }
    },
    components: {
      MhHeader,
      LikeList
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../../assets/css/mixin";
  .like-wrap {
    border:1px solid #fff;
    background-color: #fff;
  }
  .my-avatar {
    width: 7.5rem;
    height: 7.5rem;
    margin: 1rem auto;
    border-radius: 100%;
    overflow: hidden;
    img {width: 100%;}
  }
  .pic-box {
    position: relative;
    width: 7rem;
    height: 7rem;
    margin: 0 auto 1rem;
    border-radius: 100%;
    overflow: hidden;
    img {width: 100%;}
    .lock-layer {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 2;
      left: 0;
      top: 0;
      background-color: rgba(0,0,0,.3);
    }
    .lock {width: 1.5rem;@include center;z-index: 3;}
  }
  .text-lg {font-size: 1.8rem;}
  .visitor-list {
    width: 100%;
    ul {flex-wrap: wrap;padding: 1.5rem;}
    li {
      width: 33%;
      margin-bottom: 2rem;
    }
  }
</style>
